<script setup lang="ts">
import headerview from '@/components/default/HeaderView.vue'
import slide from '@/components/default/SlideView.vue'
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <div class="common-layout">
      <el-container>
        <el-aside>
			<slide></slide>
		</el-aside>
        <el-container class="container">
          <el-header>
			  <headerview></headerview>
		  </el-header>
          <el-main>
			<router-view></router-view>
		  </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<style scoped>
	.main{
		display: flex;
	}
	.common-layout{
		height: 100%;
	}
	.el-container{
		
		height: 100%;
		width: 100%;
	}
	.el-aside{
		background-color: #545d64;
		width: 18%;
	}
	.container{
		width:1000px;
	}
	.el-header{
		background-color: #ffecce;
		display: flex;
		justify-content: space-between;
		align-items: center;
		grid-column: 1/5;
	}
	.el-main{
		background-color: #f1f1f1;
	}
</style>